<template>
    <div class="detailUser">
        <img class="img" alt="right" src="../../assets/home_20.png">
        <van-cell-group>
            <van-field label="用户编号" :value="userInfo.user_id" readonly/>
            <van-field label="用户类型" :value="userInfo.user_type_zw" readonly/>
            <van-field label="有效截止时间" :value="userInfo.user_time" readonly/>
            <van-field label="有效时间段1" :value="userInfo.user_time_rang1 + '-' +  userInfo.user_time_rang2" readonly/>
            <van-field label="有效时间段2" :value="userInfo.user_time_rang3 + '-' +  userInfo.user_time_rang4" readonly/>
            <van-field label="有效时间段3" :value="userInfo.user_time_rang5 + '-' +  userInfo.user_time_rang6" readonly/>
            <van-cell-group>
                <van-cell title="指纹" >
                    <van-checkbox slot="right-icon" v-model="userInfo.user_key_0" disabled/>
                </van-cell>
                <van-cell title="密码" >
                    <van-checkbox slot="right-icon" v-model="userInfo.user_key_1" disabled />
                </van-cell>
                <van-cell title="IC卡" >
                    <van-checkbox slot="right-icon" v-model="userInfo.user_key_2 " disabled/>
                </van-cell>
            </van-cell-group>
        </van-cell-group>
        <div class="buttonList" v-for="(item,index) in items">
            <div class="flexItem">
                <div class="button" @click="onGeneralClick(item.link||'/',Object.assign(item.queryParams|| null,{
                    user_type_code: userInfo.user_type_code,
                    user_key_0:userInfo.user_key_0,
                    user_key_1:userInfo.user_key_1,
                    user_key_2:userInfo.user_key_2
                }))">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {post} from "../../js/utils";
    import moment from 'moment';
    import {parse2002} from "../../js/parseData";
    import {CellGroup,Cell, Field,RadioGroup, Radio,Checkbox, CheckboxGroup} from 'vant';

    export default {
        name: 'DetailUser',
        components: {
            vanCellGroup: CellGroup,
            vanCell: Cell,
            vanField: Field,
            vanRadioGroup : RadioGroup,
            vanRadio: Radio,
            vanCheckbox:Checkbox,
            vanCheckboxGroup: CheckboxGroup,
        },
        data () {
            return {
                devId: this.$route.query.devId,
                id: this.$route.query.id,
                userInfo: {},
                items: [{
                    name: "重命名",
                    link: '/rename',
                    queryParams: {
                        devId: this.$route.query.devId,
                        id: this.$route.query.id,
                    }
                }, {
                    name: '添加/删除钥匙',
                    link: '/managerKeys',
                    queryParams: {
                        gatewayId: this.$route.query.gatewayId, //可以修改為从ret取
                        devId: this.$route.query.devId,
                        id: this.$route.query.id,
                    }
                }],
            }
        },
        created () {
            this.parse()
        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            parse: async function () {
                let ret = await post("/user/listGateways")
                ret.deviceKvs.map(({DevId, Key, Value, Created}, index_i) => {
                    if (this.devId == DevId && Key == '02' + "_" + (Array(4).join(0) + Number.parseInt(this.id).toString(16)).slice(-4) ){ //若设备id一致，则合并KeyValue属性到列表中
                        let {hexDecimal,decimalSystem, binarySystem} = parse2002(Value)
                        this.userInfo = {
                            user_type_code: hexDecimal[0], //用户类型
                            user_type_zw: decimalSystem[0] == 1 ? '管理员用户' : decimalSystem[0] == 2 ? '来宾用户' : '普通用户', //用户类型
                            user_id: decimalSystem[1], //用户id
                            user_time: moment(new Date(decimalSystem[2], decimalSystem[3] - 1, decimalSystem[4], decimalSystem[5], decimalSystem[6], decimalSystem[7])).format('YYYY-MM-DD hh:mm:ss'), //截止时间
                            user_time_rang1: moment(new Date(2020, 0, 1, decimalSystem[8], decimalSystem[9], decimalSystem[10])).format('HH:mm:ss'), //有效时间段1开始
                            user_time_rang2: moment(new Date(2020, 0, 1, decimalSystem[11], decimalSystem[12], decimalSystem[13])).format('HH:mm:ss'), //有效时间段1结束
                            user_time_rang3: moment(new Date(2020, 0, 1, decimalSystem[14], decimalSystem[15], decimalSystem[16])).format('HH:mm:ss'), //有效时间段2开始
                            user_time_rang4: moment(new Date(2020, 0, 1, decimalSystem[17], decimalSystem[18], decimalSystem[19])).format('HH:mm:ss'), //有效时间段2结束
                            user_time_rang5: moment(new Date(2020, 0, 1, decimalSystem[20], decimalSystem[21], decimalSystem[22])).format('HH:mm:ss'), //有效时间段3开始
                            user_time_rang6: moment(new Date(2020, 0, 1, decimalSystem[23], decimalSystem[24], decimalSystem[25])).format('HH:mm:ss'), //有效时间段3结束
                            user_key_0: [...binarySystem[binarySystem.length - 1].split('').reverse().join('')][0] == 1 ? true :false, //最后一个二进制倒序
                            user_key_1: [...binarySystem[binarySystem.length - 1].split('').reverse().join('')][1] == 1 ? true :false,//最后一个二进制倒序
                            user_key_2: [...binarySystem[binarySystem.length - 1].split('').reverse().join('')][2] == 1 ? true :false, //最后一个二进制倒序
                        };
                    }
                })
            }
        }
    }
</script>

<style scoped>

    .detailUser > .buttonList > .flexItem {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        line-height: 8vh;
    }

    .detailUser > .van-cell-group {
        text-align: left;
    }

    .detailUser > .buttonList > .flexItem > .button {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }

    .detailUser > .buttonList > .flexItem > .button:active {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_grep.png) no-repeat;
        color: orange;
        background-size: 100% 100%;
        align-self: center;
    }


</style>
